<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料设置</title>
    <link rel="stylesheet" href="../styles/styles-main.css">
    <link rel="stylesheet" href="../styles/modules.css">

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../scripts/api-client.js"></script>
    <script src="../scripts/navbar-main.js"></script>
    <script src="../scripts/sidebar-manager.js"></script>
    <style>
        .profile-container {
            display: flex;
            gap: 30px;
            max-width: 1200px;
            margin: 0 0 0 200px;
            padding: 30px 50px 30px 40px;
        }
        
        .profile-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            height: fit-content;
        }

        .avatar-section {
            text-align: center;
            margin-bottom: 30px;
            margin-left: 0;
            padding: 0 20px;
        }

        .avatar-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: white;
            font-weight: bold;
            border: 3px solid #f8f9fa;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
        }

        .avatar-preview:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }

        .avatar-upload {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        .avatar-btn {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: #f8f9fa;
            color: #495057;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .avatar-btn:hover {
            background: #e9ecef;
            border-color: #adb5bd;
        }

        .avatar-btn.primary {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }

        .avatar-btn.primary:hover {
            background: #0056b3;
            border-color: #0056b3;
        }

        .avatar-input {
            display: none;
        }

        .profile-main {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            flex: 1;
        }

        .form-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #495057;
        }

        .form-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .form-input:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
        }

        .form-textarea {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            min-height: 100px;
            resize: vertical;
            transition: all 0.3s;
        }

        .form-textarea:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
        }

        .form-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 30px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background: #0056b3;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #545b62;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background: #c82333;
        }

        .profile-info {
            text-align: center;
        }

        .profile-info h2 {
            margin: 0 0 10px;
            font-size: 24px;
            color: #333;
        }

        .profile-info p {
            margin: 5px 0;
            color: #6c757d;
        }

        .success-message {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #28a745;
            color: white;
            padding: 15px 20px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transform: translateX(120%);
            transition: transform 0.3s ease;
            z-index: 1000;
        }

        .success-message.show {
            transform: translateX(0);
        }
        
        @media (max-width: 768px) {
            .profile-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <main class="content profile-container">
            <div class="profile-card">
                <div class="avatar-section">
                    <div class="avatar-preview" id="avatarPreview">A</div>
                    <div class="avatar-upload">
                        <label for="avatarInput" class="avatar-btn primary">
                            <i class="fas fa-camera"></i>
                            更换头像
                        </label>
                        <input type="file" id="avatarInput" class="avatar-input" accept="image/*" onchange="handleAvatarUpload(event)">
                    </div>
                </div>
                
                <div class="profile-info">
                    <h2>管理员</h2>
                    <p>admin@example.com</p>
                    <p>超级管理员</p>
                </div>
            </div>
            
            <div class="profile-main">
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-user"></i>
                        基本信息
                    </h3>
                    <div class="form-group">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-input" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-input" id="email" placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label class="form-label">职位</label>
                        <input type="text" class="form-input" id="position" placeholder="请输入职位">
                    </div>
                    <div class="form-group">
                        <label class="form-label">电话</label>
                        <input type="tel" class="form-input" id="phone" placeholder="请输入电话">
                    </div>
                </div>
                
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-info-circle"></i>
                        个人简介
                    </h3>
                    <div class="form-group">
                        <label class="form-label">个人简介</label>
                        <textarea class="form-textarea" id="bio" placeholder="请输入个人简介"></textarea>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-lock"></i>
                        修改密码
                    </h3>
                    <div class="form-group">
                        <label class="form-label">当前密码</label>
                        <input type="password" class="form-input" id="currentPassword" placeholder="请输入当前密码">
                    </div>
                    <div class="form-group">
                        <label class="form-label">新密码</label>
                        <input type="password" class="form-input" id="newPassword" placeholder="请输入新密码">
                    </div>
                    <div class="form-group">
                        <label class="form-label">确认新密码</label>
                        <input type="password" class="form-input" id="confirmPassword" placeholder="请再次输入新密码">
                    </div>
                </div>
                
                <div class="form-actions">
                    <button class="btn btn-secondary" onclick="resetForm()">
                        <i class="fas fa-undo"></i>
                        重置
                    </button>
                    <button class="btn btn-primary" onclick="saveProfile()">
                        <i class="fas fa-save"></i>
                        保存
                    </button>
                </div>
            </div>
        </main>
    </div>

    <div class="success-message" id="successMessage">
        <span>保存成功</span>
    </div>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadProfileData();
        });

        // 加载个人资料数据
        function loadProfileData() {
            const savedProfile = localStorage.getItem('adminProfile');
            if (savedProfile) {
                const profileData = JSON.parse(savedProfile);
                document.getElementById('username').value = profileData.username || '';
                document.getElementById('email').value = profileData.email || '';
                document.getElementById('position').value = profileData.position || '';
                document.getElementById('phone').value = profileData.phone || '';
                document.getElementById('bio').value = profileData.bio || '';
                
                // 更新头像
                if (profileData.avatarImage) {
                    const avatarPreview = document.getElementById('avatarPreview');
                    avatarPreview.innerHTML = `<img src="${profileData.avatarImage}" style="width:100%; height:100%; object-fit:cover; border-radius:50%;">`;
                    avatarPreview.dataset.image = profileData.avatarImage;
                } else if (profileData.avatar) {
                    document.getElementById('avatarPreview').textContent = profileData.avatar;
                }
                
                // 更新显示信息
                document.querySelector('.profile-info h2').textContent = profileData.username || '管理员';
                document.querySelector('.profile-info p:nth-child(2)').textContent = profileData.email || 'admin@example.com';
                document.querySelector('.profile-info p:nth-child(3)').textContent = profileData.position || '超级管理员';
            }
        }

        // 处理头像上传
        function handleAvatarUpload(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const avatarPreview = document.getElementById('avatarPreview');
                    avatarPreview.innerHTML = `<img src="${e.target.result}" style="width:100%; height:100%; object-fit:cover; border-radius:50%;">`;
                    avatarPreview.dataset.image = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        // 移除头像
        function removeAvatar() {
            const avatarPreview = document.getElementById('avatarPreview');
            avatarPreview.innerHTML = 'A';
            delete avatarPreview.dataset.image;
            document.getElementById('avatarInput').value = '';
        }

        // 保存个人资料
        function saveProfile() {
            const profileData = {
                username: document.getElementById('username').value,
                email: document.getElementById('email').value,
                position: document.getElementById('position').value,
                phone: document.getElementById('phone').value,
                bio: document.getElementById('bio').value,
                avatar: document.getElementById('avatarPreview').textContent || 'A',
                role: '超级管理员',
                regDate: '2024-01-01'
            };

            // 如果有图片头像，也保存
            const avatarPreview = document.getElementById('avatarPreview');
            if (avatarPreview.dataset.image) {
                profileData.avatarImage = avatarPreview.dataset.image;
                profileData.avatar = '';
            }

            localStorage.setItem('adminProfile', JSON.stringify(profileData));
            showSuccessMessage('个人资料保存成功');
            
            // 更新显示信息
            document.querySelector('.profile-info h2').textContent = profileData.username || '管理员';
            document.querySelector('.profile-info p:nth-child(2)').textContent = profileData.email || 'admin@example.com';
            document.querySelector('.profile-info p:nth-child(3)').textContent = profileData.position || '超级管理员';
            
            // 更新导航栏个人资料显示
            if (typeof navbarManager !== 'undefined') {
                navbarManager.updateUserInfo(profileData);
            }
        }

        // 重置表单
        function resetForm() {
            if (confirm('确定要重置所有设置吗？')) {
                localStorage.removeItem('adminProfile');
                loadProfileData();
                document.getElementById('avatarPreview').innerHTML = 'A';
                delete document.getElementById('avatarPreview').dataset.image;
                showSuccessMessage('设置已重置');
            }
        }

        // 显示成功消息
        function showSuccessMessage(message) {
            const successMsg = document.getElementById('successMessage');
            successMsg.querySelector('span').textContent = message;
            successMsg.classList.add('show');
            
            setTimeout(() => {
                successMsg.classList.remove('show');
            }, 3000);
        }
    </script>
</body>
</html>